.top {
    background-size: cover,cover;
    overflow:hidden;
}

.logo_box {
    margin: 20px;
    max-width: 400px;
    float: left;
}

#logo{
	width: 100%;
}

.link_box {
	margin: 20px 80px 0 0;
	float:right;
	cursor: pointer;
}

#friend_link{
	width:180px;
}

.link_box:hover #friend_link{
	opacity:0.8;
}

#link_dropdown {
	list-style: none;
	text-align: left;
	overflow: hidden;
	border-radius: 8px;
}

#link_dropdown li{
	background-color:var(--color);
}

#link_dropdown li:hover{
	-webkit-animation:change_color 1s forwards;
	animation:change_color 1s forwards;
}

@-webkit-keyframes change_color{
	from {background-color:var(--color);
	color:#FFFFFF;}
	to {background-color:#FFFFFF;
	color:var(--color);}
}

@keyframes change_color{
	from {background-color:var(--color);
	color:#FFFFFF;}
	to {background-color:#FFFFFF;
	color:var(--color);}
}

span.link_type{
	display:inline-block;
	width:4rem;
	border-style:solid;
	border-radius: 6px;
	border-width: 1px;
	border-color:#FFFFFF; 
	text-align: center;
	font-size: 0.75em;
}
			
#link_dropdown li:hover .link_type{
	-webkit-animation:change_border_color 1s forwards;
			animation:change_border_color 1s forwards; 
}

@-webkit-keyframes change_border_color{
	from {border-color:#FFFFFF;}
	to {border-color:var(--color);}
}

@keyframes change_border_color{
	from {border-color:#FFFFFF;}
	to {border-color:var(--color);}
}

@media screen and (max-width: 800px) {
	.link_box {
		display:none;
	}
}